
<script setup lang='ts'>
import { ref, reactive, watch } from 'vue'
import { useRoute, useRouter, RouteParamValue } from "vue-router"
import { ElMessage,type FormInstance, FormRules } from 'element-plus'
import { User, Lock, Key, Picture, Loading } from "@element-plus/icons-vue"
import { type ILoginRequestData } from "@/api/login/types/login"
import { useUserStore } from "@/store/modules/user"
import ThemeSwitch from "@/components/ThemeSwitch/index.vue"
import LangSelect from "@/components/LangSelect/index.vue"
import { useI18n } from "vue-i18n"
import { i18n } from "@/locale"
import { userConfig } from "@/config/config";

let { t,locale }:any = useI18n()
/** 登录表单校验规则 */
const loginFormRef = ref<FormInstance | null>(null)
/**  */
const redirect = ref<null | RouteParamValue>(null) 
// const otherQuery = reactive({})
const loginFormRules:FormRules = {
    username: [{ required: true, message: `${ t('page.pleseInput') }`, trigger: "blur" }],
    password: [
        { required: true, message: `${t('page.pleseInput')}`, trigger: "blur" },
        { min: 6, max: 18, message: "长度在 6 到 18 个字符", trigger: "blur" }
    ],
}

const route = useRoute()
const router = useRouter()

/** 按钮 */ 
const loading = ref<boolean>(false)
const loginForm:ILoginRequestData = reactive({
    username: "admin",
    password: "12345678",
    type:1, // 1: 后台系统 2: pc 端 3: APP端 4: h5 端  5: 微信小程序
})
/** 忘记密码 */
const forgetPwd = ()=>{
    ElMessage.warning("请联系管理员")
} 

const handleLogin = (e:Event)=>{
    
    loginFormRef.value?.validate((valid:boolean)=>{
        if(valid){
            loading.value = true
            useUserStore().login({
                username:loginForm.username,
                password:loginForm.password,
                type:loginForm.type,
            }).then((res)=>{ // 成功
                router.push({
                    path: "/",
                    query:route.query
                }).then(()=>{
                    ElMessage.success("登录成功")
                })

            }).catch(()=>{ // 失败
                loginForm.password = "" // 清空密码
            }).finally(()=>{
                loading.value = false
            })
        }else {
            return false
        }
    })
}

</script>

<template>
    <div class="login-container">
        <div class="login-operate">
            <LangSelect class="right-operate-item"/>
            <ThemeSwitch class="right-operate-item"/>
        </div>
        <div class="login-card">
            <div class="l">
                <h3 class="title">{{ userConfig().SYSTEMNAME }}</h3>
                <svg-icon name="login-bg" class="login-bg"></svg-icon>
            </div>
            <div class="r">
                <h3>{{ $t('page.login') }}</h3>
                <div class="content">
                    <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" @keyup.enter="handleLogin">
                        <el-form-item prop="username">
                            <el-input
                                v-model.trim="loginForm.username"
                                :placeholder="`${$t('page.username')}`"
                                type="text"
                                tabindex="1"
                                :prefix-icon="User"
                                size="large"
                                clearable
                            />
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input
                            v-model.trim="loginForm.password"
                            :placeholder="`${$t('page.password')}`"
                            type="password"
                            tabindex="2"
                            :prefix-icon="Lock"
                            size="large"
                            show-password
                            clearable
                            />
                        </el-form-item>
                        <el-form-item>
                            <el-link type="primary" :underline="false" @click="forgetPwd"> {{ $t('page.forgetPwd') }}</el-link>
                        </el-form-item>
                        <el-button :loading="loading" type="primary" size="large" class="login-btn" @click.prevent="handleLogin"> {{ $t('page.login') }} </el-button>
                    </el-form>
                    <div class="help">
                        <span>{{ $t('page.help') }}</span>
                        <span>{{ $t('page.conceal') }}</span>
                        <span>{{ $t('page.clause') }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>



<style lang='scss' scoped>
 .login-container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
    min-height: 100%;
    .login-operate{
        position: absolute;
        right: 20px;
        top:10px;
        display: flex;
        align-items: center;
        .right-operate-item{
            padding:0 10px;
            cursor: pointer;
        }
    }
    .login-card{
        width: 880px;
        border-radius: 10px;
        box-shadow: 0 0 10px var(--el-box-shadow);
        background-color: #fff;
        overflow: hidden;
        display: flex;

        .l{
            width:430px;
            padding:30px 10px;
            border-right:1px solid #f1f1f1;
            .title{
                font-size: 30px;
                text-align: center;
            }
            .login-bg{
                font-size:400px;
            }
        }
        .r{
            position: relative;
            text-align: center;
            width: 450px;
            h3{
                padding:30px 0;
                font-size: 30px;
            }
            .content{
                padding:40px 50px 20px;
                .login-btn{
                    width:100%;
                }
                .help{
                    
                    position: absolute;
                    bottom: 20px;
                    left:50%;
                    transform: translateX(-50%);
                    width:100%;
                    font-size: var(--el-font-size-small);
                    span{
                        margin: 0 20px;
                        cursor: pointer;
                    }
                }
            }
        }
        
    }
 }
</style>